{extend name="sitehome@style/base"/}
{block name="resources"}
<style>
.custom-headimg img{
    /*width:30px;*/
    height:45px;
    width:45px;
    border-radius:50px;
}
.layui-table-cell{
    height:auto !important;
}
.custom-nick{
    margin-left: 17px;
    padding-top: 12px;
    color: #8d8d8d;
}
.custom-account{
    height:22.5px;
    line-height:22.5px;
    color: #222;
}
.custom-status{
    height:22.5px;
    line-height:22.5px;
    color: #8d8d8d;
}
.custom-help{
    border-radius:50px;
    color:#FFF;
    background-color:#d2d2d2;
    font-size:12px;
    padding:2px;
    margin-left:10px;
}
.custom-tip{
    color:#393D49;
}
.add-custom{
    margin-top:10px;
}
.custom-ul-li-hidden{
    display:none;
}
.custom-center{
    width:530px;
    margin: 40px  auto 20px;
}
.nickname{
    width:320px;
}
.bottom-button{
    text-align: center;
    position:absolute;
    bottom:20px;
    right:0;
    left:0;
}
.open-box{
    display:none;
    margin-top: 15px;
    font-size:12px;
}
.wx-account{
    height:35px;
    line-height:35px;
}
</style>
{/block}
{block name="main"}

<!--添加客服人员-->
<div class="layui-form open-box"  id="saveCustomService" lay-filter="addCustomService" >

    <div class="layui-form-item custom-center">

        <div class="layui-inline">
            <label class="layui-form-label">客服昵称</label>
            <div class="layui-input-inline" >
                <input type="text"  name="nickname" placeholder="请输入客服昵称" autocomplete="off" class="layui-input nickname">
            </div>
        </div>

    </div>
    <div class="bottom-button">
        <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="saveCustomService">添加</button>
    </div>
</div>

<!--绑定微信号-->
<div class="layui-form open-box"  id="bindingCustomService" lay-filter="bindCustomService" >

    <input type = "hidden" name = "kf_account" value="" />
    <input type = "hidden" name = "id" value="" />
    <div class="layui-form-item custom-center" style="width:330px;">
        <div class="layui-inline">
            <p class="wx-account">请输入需绑定的客服人员微信号</p>
        </div>
        <br/>
        <div class="layui-inline">
            <div class="layui-input-inline" >
                <input type="text"  name="wx_account" placeholder="请输入微信号" autocomplete="off" class="layui-input nickname">
            </div>
        </div>

    </div>
    <div class="bottom-button">
        <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="binding">邀请绑定</button>
        <button type="button" class="layui-btn layui-btn-primary" lay-submit lay-filter="cancel">取消</button>
    </div>
</div>

<!-- 头像 客服信息 -->
<script type="text/html" id="headimg">
    <div>
        <span class="custom-headimg"><img {{# if(d.headimgurl != '' ){ }} src="{{d.headimgurl}}" {{# } }}/></span>
        <span class="custom-nick">{{ d.nickname }}</span>
    </div>
</script>
<script type="text/html" id="userinfo">
    <ul>
        <li class="custom-account {{# if(d.invite_status == ''){ }} custom-ul-li {{# }else{ }}custom-ul-li-hidden{{# } }}">{{ d.wx_account }}</li>
        <li class="custom-status {{# if(d.wx_account == ''){ }} custom-ul-li {{# }else{ }}custom-ul-li-hidden{{# } }}">
            {{#  if(d.invite_status == 'waiting'){ }}
            绑定邀请待确认 <i class="layui-icon layui-icon-help custom-help" data-tips=""></i>
            {{#  }else if(d.invite_status == 'rejected'){ }}
            绑定邀请被拒绝<i class="layui-icon layui-icon-help custom-help" data-tips=""></i>
            {{#  }else if(d.invite_status == 'expired'){ }}
            绑定邀请过期<i class="layui-icon layui-icon-help custom-help" data-tips=""></i>
            {{#  }else if(d.invite_status == 'binding'){ }}
            未绑定<i class="layui-icon layui-icon-help custom-help" data-tips="完成绑定后可使用该客服帐号进行客服聊天功能"></i>
            {{#  }else{ }}

            {{#  } }}
        </li>
    </ul>
</script>
<!-- 列表操作 -->
<script type="text/html" id="operation">
    {{#  if(d.invite_status == ''){ }}
        <!--<a class="default" lay-event="record">客服记录</a>-->
    {{#  }else if(d.invite_status == 'binding'){ }}
    <a class="default" lay-event="binding">绑定</a>
    {{#  } }}
    <!--<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>-->
    <a class="default" lay-event="del">删除</a>
</script>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class='layui-this'>
        <a href='{:addon_url("Wechat://sitehome/Customservice/index")}'>账号管理</a>
        </li>
        <!--<li >-->
        <!--<a href='{:addon_url("Wechat://sitehome/leavemsg/index?is_starred_msg=1")}'>客服数据</a>-->
        <!--</li>-->
        <!--<li >-->
            <!--<a href='{:addon_url("Wechat://sitehome/leavemsg/index?is_starred_msg=1")}'>客服素材</a>-->
        <!--</li>-->
    </ul>
    <!--<p class="tips-">-->
        <!--绑定后的客服帐号，可以登录<a>在线客服功能</a>，进行客服沟通。详情查看<a>使用说明</a>。-->
    <!--</p>-->
    <!-- 操作按钮组 -->
    <a class="layui-btn add-custom"  href="javascript:openSaveCustomService();">添加客服</a>
    <a class="layui-btn layui-btn-xs layui-icon layui-icon-refresh add-custom" onclick="refresh()">&nbsp;更新客服列表</a>
    <table id="customservice_list" lay-filter="customservice"></table>
</div>

<!-- 更新遮罩层 -->
<div class="data-loading-eject-layer" style="display:none;">
    <div class="prompt_information">
        <div class="load-icon"><i class="fa fa-refresh fa-spin fa-5x fa-fw"></i></div>
        <div class="progress_bar">
            <div class="speed_of_progress"></div>
        </div>
        <p class="information">正在更新中</p>
    </div>
</div>
{/block} {block name="script"}
<script>
    var save_index;
    var form;
    var bind_index;
    var table = new Table({
		elem : '#customservice_list',
        filter : "customservice",
		url : '{:addon_url("Wechat://sitehome/Customservice/index")}',
		cols : [[
			{field : '', width : '30%', title : '客服信息', templet : '#headimg'},
			{field : '', width : '50%', title : '绑定微信号', templet : '#userinfo'},
			{title : '操作', toolbar : '#operation'}
		]]
    });

	//监听工具条
	table.tool(function(obj) {
		var data = obj.data;
		switch (obj.event) {
			case "record":
				window.location.href = nc.url('admin/user/siteList', {"uid" : data.uid});
				break;
			case "edit":
				window.location.href = nc.url('admin/user/editUser', {"uid" : data.uid});
				break;
			case "del":
				var confirm_index = layer.confirm('确定要删除吗？', {
					btn: ['确定','取消']
				}, function(){
					// layer.close(confirm_index);
					deleteCustomservices(data.id, data.account);
				}, function(){
					layer.close(confirm_index);
				});
				break;
			case "binding":
				bind_index = layer.open({
					type: 1,
					shadeClose: true,
					shade: false,
					title: "绑定微信号",
					area: ['650px', '400px'], //宽高
					content:  $('#bindingCustomService'),
					cancel: function(){
						//右上角关闭回调
						$("#bindingCustomService input[name=kf_account]").val('');//还原
						$("#bindingCustomService input[name=id]").val('');//还原
						$("#bindingCustomService input[name=wx_account]").val('');//还原
						//return false 开启该代码可禁止点击该按钮关闭
					}
				});
				$("#bindingCustomService input[name=kf_account]").val(obj.data.account);
				$("#bindingCustomService input[name=id]").val(obj.data.id);
				break;
		}
	});
	
    layui.use([ 'form' ], function() {
        form = layui.form;
		var repeat_flag = false;//防重复标识
        $("body").on("mouseenter", ".custom-help", function(){
            var title = $(this).attr("data-tips");
            layer.tips('<span class="custom-tip">'+title+'</span>', $(this), {
                tips: [3, '#FFF'],
                time: 0
            });
        });
        
        $("body").on("mouseleave", ".custom-help", function(){
            layer.closeAll('tips');
        });

        form.on('submit(saveCustomService)', function(data){
            //绑定操作
            if(repeat_flag) return;
			repeat_flag = true;
            $.ajax({
                type : "post",
                url : "{:addon_url('Wechat://sitehome/Customservice/saveWechatCustomservices')}",
                data : data.field,
                dataType : "JSON",
                success : function(res){
                    layer.msg(res.message,{},function(){ if(res.code == 0){table.reload(); layer.close(save_index);}});
					repeat_flag = false;
                }
            })
        });
        
        form.on('submit(binding)', function(data){
            //绑定操作
            if(repeat_flag) return;
			repeat_flag = true;
            $.ajax({
                type : "post",
                url : "{:addon_url('Wechat://sitehome/Customservice/bindingCustomservices')}",
                data : data.field,
                dataType : "JSON",
                success : function(res){
                    layer.msg(res.message,{},function() {
						if (res.code == 0) {
							table.reload();
							layer.close(save_index);
						}
						repeat_flag = false;
					});
                }
            })
        });
        
        form.on('submit(cancel)', function() {
			layer.close(bind_index);
			$("#bindingCustomService input[name=kf_account]").val('');//还原
			$("#bindingCustomService input[name=id]").val('');//还原
			$("#bindingCustomService input[name=wx_account]").val('');//还原
		});
    });
    
	/**
	 * 删除客服
	 **/
	var repeat_flag_delete = false;//防重复标识
	function deleteCustomservices(id, account){
		if(repeat_flag_delete) return;
		repeat_flag_delete = true;
		$.ajax({
			type : "post",
			url : "{:addon_url('Wechat://sitehome/Customservice/deleteCustomservices')}",
			data : {"account" : account, "id" : id},
			dataType : "JSON",
			success : function(res){
				layer.msg(res.message,{},function() {
					if (res.code == 0) {
						table.reload();
						layer.close(msg_index);
					}
					repeat_flag_delete = false;
				});
			}
		})
	}

    // 更新粉丝列表
	var repeat_flag_refresh = false;//防重复标识
    function refresh(){
        var msg_index;
        if(repeat_flag_refresh) return;
		repeat_flag_refresh = true;
        $.ajax({
            type : "post",
            url : "{:addon_url('Wechat://sitehome/Customservice/updateWechatCustomservicesList')}",
            data : {},
            dataType : "JSON",
            beforeSend:function(){
                var html = $(".data-loading-eject-layer").html();
                msg_index = layer.msg(html,{time : 0});
            },
            success : function(res){
                layer.msg(res.message,{},function() {
					if (res.code == 0) {
						table.reload();
						layer.close(msg_index);
					}
					repeat_flag_refresh = false;
				});
            }
        })
    }
    
    /**
     * 添加客服
     */
    function openSaveCustomService(){
        save_index = layer.open({
            type: 1,
            shadeClose: true,
            shade: false,
            title: "添加客服",
            area: ['650px', '400px'], //宽高
            content:  $('#saveCustomService'),
            cancel: function(){
                //右上角关闭回调
                $("#saveCustomService input[name=nickname]").val('');//还原
            }
        });
    }
</script>
{/block}